<template>
  <el-scrollbar style="height:100%;">
    <div class="bgk_container">
      <div class="goBack">
        <i class="iconfont icon-zhuye" @click="goBackHome()"></i>
      </div>
      <div class="title">评论管理</div>
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="add_time" label="发表时间" align="center">
        </el-table-column>
        <el-table-column prop="nickName" label="评论者" width="80px" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱地址" align="center">
        </el-table-column>
        <el-table-column prop="articleTitle" label="文章标题" align="center">
        </el-table-column>
        <el-table-column prop="content" label="评论内容" align="center">
        </el-table-column>
        <el-table-column prop="commentType" label="评论类型" width="100px" align="center">
          <template v-slot="scoped">
            <el-tag v-if="scoped.row.commentType == 0">游客评论</el-tag>
            <el-tag v-else-if="scoped.row.commentType == 1" type="success">站长回复</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="180px" align="center">
          <template v-slot="scoped">
            <el-button type="primary"
              @click="replyDialogVisible = true;editCurrent(scoped.row._id,scoped.row.articleId)">
              回复</el-button>
            <el-button type="danger"
              @click="deleteDialogVisible = true;deleteComments(scoped.row._id,scoped.row.commentType)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 回复评论 -->
      <el-dialog title="回复评论" :visible.sync="replyDialogVisible" width="30%">
        <el-input type="textarea" v-model="replyContent"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="replyDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="replyDialogVisible = false;replyCommentByKpods()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除评论 -->
      <el-dialog title="删除评论" :visible.sync="deleteDialogVisible" width="30%">
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteDialogVisible = false;deleteCommentByKpods()">确 定</el-button>
        </span>
      </el-dialog>
      <transition name="fade">
        <loading v-if="isLoading"></loading>
      </transition>
    </div>
  </el-scrollbar>
</template>

<script>
import Loading from '../loading/loading.vue'
export default {
  components: { Loading },
  data() {
    return {
      tableData: [
        {
          id: 1,
          add_time: '2016-05-02',
          nickName: '王小虎',
          content: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          add_time: '2016-05-04',
          nickName: '王小虎',
          content: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: '3',
          add_time: '2016-05-01',
          nickName: '王小虎',
          content: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: '31',
            add_time: '2016-05-01',
            nickName: '王小虎',
            content: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: '32',
            add_time: '2016-05-01',
            nickName: '王小虎',
            content: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          add_time: '2016-05-03',
          nickName: '王小虎',
          content: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      replyComments: [],
      replyDialogVisible: false,
      deleteDialogVisible: false,
      replyContent: '',
      commentId: '',
      articleId: '',
      deleteId: '',
      deleteType: '',
      // Loading状态
      isLoading: true
    }
  },
  created() {
    this.getAllComments()
    this.getAllReplyComments()
  },
  methods: {
    // 返回主页
    goBackHome() {
      this.$router.push('/BsHome')
    },
    // 获取所有评论
    getAllComments() {
      this.$http.get('articleComment').then(response => {
        this.tableData = response.data
        this.isLoading = false
      })
    },
    // 获取所有站长回复
    getAllReplyComments() {
      this.$http.get('replyComment').then(response => {
        this.replyComments = response.data
        this.replyComments.forEach((item1, index1) => {
          item1.id = item1._id
          this.tableData.forEach((item2, index2) => {
            item2.id = item2._id
            if (item1.commentId === item2._id) {
              item2.children.push(item1)
            }
          })
        })
      })
    },
    // 回复评论按钮
    editCurrent(id, articleId) {
      this.commentId = id
      this.articleId = articleId
    },
    // 回复评论确定
    replyCommentByKpods() {
      if (this.replyContent === '') {
        this.$message.error('请填写相关的信息！')
      } else {
        const date = new Date()
        const year = date.getFullYear()
        const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
        const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        const min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        this.$http.post('replyComment', {
          content: this.replyContent,
          add_time: `${year}年${month}月${day}日${hour}:${min}:${second}`,
          articleId: this.articleId,
          commentId: this.commentId,
          commentType: '1',
          nickName: 'Kpods'
        }).then(response => {
          if (response.status === 200) {
            this.$message({
              type: 'success',
              message: '评论回复成功!'
            })
            this.replyContent = ''
            this.getAllComments()
          }
        })
      }
    },
    // 删除评论按钮
    deleteComments(id, type) {
      this.deleteId = id
      this.deleteType = type
    },
    // 删除评论确定
    deleteCommentByKpods() {
      if (this.deleteType === 0 || this.deleteType === '0') {
        this.$http.delete(`/commentDelete/${this.deleteId}`).then(response => {
          if (response.status === 200) {
            this.$message({
              type: 'success',
              message: '评论删除成功!'
            })
            this.getAllComments()
          } else {
            this.$message({
              type: 'error',
              message: '评论删除失败!'
            })
            console.log(response)
          }
        })
      } else if (this.deleteType === 1 || this.deleteType === '1') {
        this.$http.delete(`/replyCommentDelete/${this.deleteId}`).then(response => {
          if (response.status === 200) {
            this.$message({
              type: 'success',
              message: '评论删除成功!'
            })
            this.getAllComments()
            this.getAllReplyComments()
          } else {
            this.$message({
              type: 'error',
              message: '评论删除失败!'
            })
            console.log(response)
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/.el-scrollbar__view {
  height: 100%;
}
.bgk_container {
  min-height: 100%;
  padding: 50px 150px;
  box-sizing: border-box;
  background-image: linear-gradient(
    to right,
    rgba(177, 94, 254, 0.6),
    rgba(255, 106, 106, 0.6),
    rgba(106, 255, 230, 0.6)
  );
  .goBack {
    float: left;
    i {
      font-size: 30px;
      color: #1296db;
      cursor: pointer;
    }
  }
  .title {
    font-size: 26px;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  .el-table {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }
  /deep/.el-textarea__inner {
    min-height: 150px !important;
  }
}
</style>
